import React from 'react'
import '@/assets/css/login.css'

const Login = () =>
{
    //实例化钩子函数
    const navigate = React.Router.useNavigate()

    const login = async (values:any) =>
    {
        var result:any = await React.HTTP.post('/business/login', values)
        
        if(result.code)
        {
            React.UI.Toast.show({
                icon: 'success',
                content: result.msg,
                duration: 1000,
                afterClose: () => 
                {
                    React.Cookie.save('business', result.data)
                    React.navigate('business/index')
                    return false
                }
            })

        }else
        {
            React.UI.Toast.show({
                icon: 'fail',
                content: result.msg
            })

            return false
        }
    }

    return (
        
        <div className="login">
            <React.UI.Form
                initialValues={{mobile:'18476561753',password:123}}
                onFinish={login}
                name='login'
                footer={
                    <React.UI.Button block type='submit' color='primary' size='large'>
                    登录
                    </React.UI.Button>
                }
            >
                <React.UI.Form.Item name='mobile' label='手机号' rules={[{ required: true}, {pattern:/^1[3456789]\d{9}$/, message: '手机号格式不对'}]}>
                    <React.UI.Input placeholder='请输入手机号' />
                </React.UI.Form.Item>

                <React.UI.Form.Item name='password' label='密码' rules={[{ required: true }]}>
                    <React.UI.Input type="password" placeholder='请输入密码' />
                </React.UI.Form.Item>
                
                <div className="item">
                    <React.Router.Link to="/business/register">
                        <div className="title">注册账号?</div>
                    </React.Router.Link>
                </div>
            </React.UI.Form>
            
        </div>
    )
}

export default Login
